import React from 'react';
import { Button } from '@/components/base';
import type { ButtonProps } from 'antd/lib/button';
import type { ICapability } from '../interfaces/ICapability';

/**
 * CapabilityButton 组件属性接口
 */
interface CapabilityButtonProps {
    /** 
     * 能力配置
     **/
    capability: ICapability;

    /** 
     * 额外的按钮属性
     * 会覆盖 expandOut 中定义的按钮属性，提供更高的灵活性
     */
    buttonProps?: ButtonProps;

    /** 
     * 传递给能力的数据
     * 在点击按钮时会传递给 onClick 处理函数
     */
    data?: any;

    /** 
     * 按钮显示的文本
     * 如果提供，会覆盖 expandOut.btnText 或 expandOut.title
     */
    children?: React.ReactNode;

    /**
     * 元素的索引，适用于列表渲染场景
     */
    index?: number;
}

/**
 * 能力按钮组件
 * 
 * 根据能力配置自动渲染按钮，并处理点击事件、权限控制等逻辑
 * 这是一个高度封装的组件，简化了能力按钮的使用
 * 现在同时支持 CapabilityResult 和 IExpandOut 接口
 * 
 * @example
 * // 基本用法
 * <CapabilityButton 
 *   expandOut={addTeacherSalary} 
 *   buttonProps={{ type: 'primary' }} 
 *   data={{ refresh }} 
 * />
 */
// export const CapabilityButton: React.FC<CapabilityButtonProps> = ({
//     expandOut,
//     buttonProps = {},
//     data,
//     index = 0,
//     children,
// }) => {
export const CapabilityButton: React.FC<CapabilityButtonProps> = props => {

    const { buttonProps = {}, data, index = 0, children, capability } = props;

    // 检查是否启用 (兼容 IExpandOut 和 CapabilityResult)
    const canEnable = React.useMemo(() => {
        // 使用 IExpandOut 的 isEnable 方法
        if ('isEnable' in capability && typeof capability.isEnable === 'function') {
            return capability.isEnable(data, index);
        }
        return true;
    }, [capability, data, index]);

    // 检查是否禁用 (兼容 IExpandOut 和 CapabilityResult)
    const isDisabled = React.useMemo(() => {
        // 首先使用外部传入的禁用属性
        if (buttonProps.disabled !== undefined) {
            return buttonProps.disabled;
        }

        // 使用 IExpandOut 的 isDisabled 方法
        if ('isDisabled' in capability && typeof capability.isDisabled === 'function') {
            return capability.isDisabled(data, index);
        }

        return false;
    }, [capability, buttonProps.disabled, data, index]);

    // 获取按钮点击处理函数 (兼容 IExpandOut 和 CapabilityResult)
    const handleClick = React.useCallback(() => {
        if ('start' in capability && capability.start) {
            capability.start(data, index);
        }
    }, [capability, data, index]);

    // 获取显示文本 (兼容 IExpandOut 和 CapabilityResult)
    const displayText = children || capability.title;

    // 合并按钮属性
    const mergedButtonProps = {
        ...buttonProps,
        disabled: isDisabled,
    };

    // 如果不启用，不渲染
    if (!canEnable) {
        return <></>;
    }

    // 检查是否为空
    if (!capability) {
        return <></>;
    }

    // 渲染按钮
    return (
        <Button
            {...mergedButtonProps}
            onClick={handleClick}
        >
            {displayText}
        </Button>
    );
};
